<template>
  <div class="APP">
    <div class="HEAR louis-space-between louis-flex-align-center">
      <router-link to="/">
        <img src="./assets/骑士.png" id="logo" alt="" />
        <span class="min-title">Louis-UI</span>
      </router-link>
      <div class="rightnav louis-space-around">
        <router-link to="/guide/design">指南</router-link>
        <router-link to="/components">组件</router-link>
        <router-link to="/about">关于我们</router-link>
      </div>
    </div>
    <div class="routerview">
      <router-view />
    </div>
  </div>
</template>





<style lang="scss" scoped>
.APP {
  max-width: 1250px;
  margin: 0 auto;
  // background-color: #fafafa;
  // box-shadow: 0px 10px 999px #e6d5d5;
}
.routerview {
  margin-top: 20px;
  height: calc(100% - 70px);
}
.HEAR {
  // margin-top: 20px;
  height: 50px;
  border-bottom: 1px solid #dddddd;
  #logo {
    width: 35px;
    height: 35px;
    margin-left: 20px;
    margin-right: 10px;
  }
  .min-title{
    color: #707070;
    font-size: 20px;
    position: relative;
    top: 5px;
  }
  .rightnav {
  width: 400px;
}
}

</style>

